<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
					<view class="image-wrapper">
						<image
							:src="item"
							class="loaded"
							mode="aspectFill"
							@click="previewCarouselImage(index)"
						></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="introduce-section base-style">
			<text class="title">{{ goodsInfo.name }}</text>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<text class="price">{{ goodsInfo.price }}</text>
				<text class="m-price">¥ {{ goodsInfo.original_price }} </text>
			</view>
			<view class="bot-row">
				<text>销量: {{ goodsInfo.sales }}</text>
				<text>限量: {{ goodsInfo.stock }}</text>
				<text>浏览量: {{ goodsInfo.views || 0 }}</text>
			</view>
		</view>
		
		<view class="c-list base-style">
			<view class="c-row b-b" @click="toggleSpec" v-if="specChildList.length > 0">
				<text class="tit">选择</text>
				<view class="con">
					<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
						{{sItem.name}}
					</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<view class="c-row b-b" v-if="goodsAttr.length > 0">
				<text class="tit">参数</text>
				<view class="con-list">
					<text v-for="(item, index) in goodsAttr" :key="index">{{ item.name }}: {{ item.value }}</text>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">服务</text>
				<view class="bz-list con">
					<text>7天无理由退换货 ·</text>
					<text>假一赔十 ·</text>
				</view>
			</view>
		</view>
		
		<view class="detail-desc base-style">
			<view class="d-header">
				<text>详情</text>
			</view>
			<rich-text :nodes="desc"></rich-text>
		</view>
		
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<uni-icons custom-prefix="iconfont" type="icon-shangpu" size="20" color="#909399" class="icon-class"></uni-icons>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<uni-badge class="uni-badge-left-margin" :text="cartNum" absolute="rightTop" size="small" :customStyle="{background: '#e93323'}">
					<uni-icons custom-prefix="iconfont" type="icon-gouwuche" size="22" color="#909399" class="icon-class"></uni-icons>
				</uni-badge>
				<text>购物车</text>
			</navigator>
			<view class="p-b-btn" @click="toFavorite">
				<uni-icons custom-prefix="iconfont" type="icon-shoucang" size="20" color="#e93323" class="icon-class" v-if="favorite"></uni-icons>
				<uni-icons custom-prefix="iconfont" type="icon-shoucang" size="20" color="#909399" class="icon-class" v-else></uni-icons>
				<text style="margin-top: 2px;">收藏</text>
			</view>
			
			<view class="action-btn-group">
				<button type="primary" class="action-btn no-border buy-now-btn" @click="buy">立即购买</button>
			</view>
		</view>
		
		<!-- 多规格-模态层弹窗 -->
		<view
			class="popup spec"
			:class="specClass"
			@touchmove.stop.prevent="stopPrevent"
			@click="toggleSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent" :style="{'min-height':height + 'vh'}">
				<view class="a-t">
					<image :src="skuInfo.image" @click="previewImage(skuInfo.image)"></image>
					<view class="right">
						<text class="price">¥ {{ skuInfo.seckill_price }}</text>
						<text class="stock">库存：{{ skuInfo.stock }} {{ goodsInfo.unit }}</text>
						<view class="selected" v-if="spec == 2">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem.name}}
							</text>
						</view>
					</view>
				</view>
				<view v-for="(item,index) in specList" :key="index" class="attr-list" v-if="spec == 2">
					<text>{{item.name}}</text>
					<view class="item-list">
						<text
							v-for="(childItem, childIndex) in specChildList"
							v-if="childItem.pid === item.id"
							:key="childIndex" class="tit"
							:class="{selected: childItem.selected}"
							@click="selectSpec(childIndex, childItem.pid)"
						>
							{{childItem.name}}
						</text>
					</view>
				</view>
				<view class="attr-list" style="margin-top: 16upx;">
					<text style="width: 20%;">数量</text>
					<view style="margin-left:70%;margin-top: -34upx;">
						<uni-number-box :min="1" :max="goodsInfo.once_buy_num" @change="changeNum" v-model="buyNum"/>
					</view>
				</view>
				<button class="buy-btn" @click="confirm" v-if="canBuy">立即购买</button>
				<button class="buy-btn" style="background: #bbb!important;" v-else>已售罄</button>
			</view>
		</view>
	</view>
</template>

<script>
	import xwEmpty from '@/components/xw-empty/xw-empty';
	import utils from '@/utils/util';
	import {
		UID
	} from '@/config/cache';
	import Cache from '@/utils/cache';
	
	export default{
		components: {
			xwEmpty
		},
		data() {
			return {
				specSelected:[],
				imgList: [],
				goodsInfo: {},
				goodsRuleMap: {},
				skuInfo: {},
				desc: '',
				specList: [],
				goodsAttr: [],
				specChildList: [],
				seckillId: 0,
				height: 40,
				cartNum: 0,
				spec: 1, // 1:单规格 2:多规格
				buyNum: 1,
				canBuy: true,
				specClass: 'none',
				favorite: false, // 收藏
				nowUserId: 0,
				canShare: true // 可以分享
			};
		},
		// 分享给好友
		onShareAppMessage(res) {
			return {
				title: this.goodsInfo.name,
				path: '/pages/seckill/product?id=' + this.seckillId
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.goodsInfo.name,
				path: '/pages/seckill/product?id=' + this.seckillId,
				imageUrl: this.imgList[0]
			};
		},
		async onLoad(options) {
			let id = options.id;
			this.seckillId = id
			
			// 当前用户
			this.nowUserId = Cache.get(UID) ? Cache.get(UID) : 0
			
			this.getGoodsDetail(id)
			this.getCarNum()
		},
		methods: {
			// 商品详情
			async getGoodsDetail(seckillId) {
				let res = await this.$api.seckill.detail.get({seckill_id: seckillId})
				if (res.code != 0) {
					this.$tool.msg(res.msg)
					setTimeout(() => {
						window.location.href = '/'
					}, 1000)
					return ;
				}
				
				this.imgList = []
				res.data.goodsRuleMap.forEach(item => {
					this.imgList.push(item.image)
				})
				
				this.goodsInfo = res.data.activity
				this.spec = res.data.activity.spec
				
				if (this.spec == 2) {
					this.height = 40
					
					// 如果是多规格
					if (res.data.goodsRule) {
						let index = 1;
						res.data.goodsRule.rule.forEach(child => {
							
							this.specList.push({
								id: index,
								name: child.title
							});
							
							child.item.forEach(item => {
								this.specChildList.push({
									pid: index,
									name: item
								});
							})
							index++;
						});
						
						this.goodsRuleMap = res.data.goodsRuleMap
						
						// 规格 默认选中第一条
						let sku = this.goodsRuleMap[0].sku
						let skuMap = sku.split('※')
						skuMap.forEach(item => {
							for (let cItem of this.specChildList) {
								if (cItem.name === item) {
									this.$set(cItem, 'selected', true);
									this.specSelected.push(cItem);
									break;
								}
							}
						})
						
						this.goodsRuleMap.forEach (item => {
							if (item.sku == sku) {
								this.skuInfo = item
							}
						})
						
						this.goodsInfo.price = this.skuInfo.seckill_price
						this.goodsInfo.original_price = this.skuInfo.goods_price
					}
				} else {
					this.height = 25
					this.skuInfo.image = res.data.goodsRuleMap[0].image
					this.goodsInfo.price = this.skuInfo.seckill_price = res.data.goodsRuleMap[0].seckill_price
					this.skuInfo.stock = res.data.goodsRuleMap[0].stock
					this.goodsInfo.original_price = res.data.goodsRuleMap[0].goods_price
				}
				
				this.goodsAttr = res.data.goodsAttr || []
				this.desc = res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
				this.favorite = res.data.favorite || false
			},
			// 规格弹窗开关
			toggleSpec() {
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			//选择规格
			selectSpec(index, pid) {
				let list = this.specChildList
				list.forEach(item => {
					if (item.pid === pid) {
						this.$set(item, 'selected', false);
					}
				})

				this.$set(list[index], 'selected', true);
				// 存储已选择
				this.specSelected = [];
				let sku = '';
				list.forEach(item => {
					if(item.selected === true){
						sku += item.name + '※'
						this.specSelected.push(item);
					}
				})
				
				sku = sku.substr(0, sku.length - 1)
				
				let hasRule = false
				this.goodsRuleMap.forEach (item => {
					if (item.sku == sku) {
						hasRule = true
						this.skuInfo = item
					}
				})
				
				if (hasRule) {
					this.goodsInfo.price = this.skuInfo.seckill_price
					this.goodsInfo.original_price = this.skuInfo.goods_price
					if (this.skuInfo.stock == 0) {
						this.canBuy = false
					} else {
						this.canBuy = true
					}
				} else {
					this.canBuy = false // 不可购买
				}
			},
			
			// 购买
			buy() {
				this.optType = 2
				this.specClass = 'show';
			},
			// 选择数量
			changeNum(val) {
				this.buyNum = val
			},
			// 收藏
			async toFavorite() {
				if (this.favorite) {
					let res = await this.$api.collect.removeByGoods.get({goods_id: this.seckillId})
					if (res.code == 0) {
						this.favorite = false
					} else {
						this.$tool.msg(res.msg);
					}
					return ;
				}
				
				let res = await this.$api.collect.add.post({
					goods_id: this.seckillId,
					goods_name: this.goodsInfo.name,
					goods_pic: this.imgList[0],
					price: this.goodsInfo.price
				})
				
				if (res.code == 0) {
					this.$tool.msg(res.msg)
					this.favorite = true
				} else {
					this.$tool.msg(res.msg)
				}
			},
			// 获取购物车数量
			async getCarNum() {
				let res = await this.$api.cart.num.get();
				this.cartNum = res.data
			},
			// 规格选择确定
			async confirm() {
				let rule = [];
				this.specSelected.forEach(item => {
					rule.push(item.name)
				})
				
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
				
				let param = [];
				// 多规格
				if (this.spec == 2) {
					param = [{id: parseInt(this.seckillId), num: this.buyNum, rule: rule.join('※')}];
				} else if (this.spec == 1) { // 单规格
					param = [{id: parseInt(this.seckillId), num: this.buyNum, rule: ''}];
				}
				
				uni.setStorage({
					key: 'SECKILL_ORDER',
					data: JSON.stringify(param)
				})
				
				uni.navigateTo({
					url: `/pages/seckill/createOrder`
				})
			},
			// 分销分享
			share() {
				// 这里可以添加分享功能
				this.$tool.msg('分享功能开发中')
			},
			// 预览图片
			previewImage(imageUrl) {
				if (!imageUrl) {
					this.$tool.msg('图片不存在');
					return;
				}
				uni.previewImage({
					urls: [imageUrl],
					current: imageUrl
				});
			},
			// 预览轮播图
			previewCarouselImage(index) {
				uni.previewImage({
					urls: this.imgList,
					current: index
				});
			},
			stopPrevent() {}
		},

	}
</script>

<style lang='scss'>
	page{
		background: linear-gradient(to bottom, #f5f7fa, #e9ecef);
		padding-bottom: 160upx;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	}
	.icon-you{
		font-size: $font-base + 2upx;
		color: #888;
	}
	.carousel {
		height: 750upx;
		position: relative;
		border-radius: 0 0 30upx 30upx;
		overflow: hidden;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		swiper{
			height: 100%;
		}
		.image-wrapper{
			width: 100%;
			height: 100%;
		}
		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
				transition: transform 0.3s ease;
				cursor: pointer;
			}
			image:hover {
				transform: scale(1.03);
			}
			image:active {
				transform: scale(0.98);
			}
		}
	}
	
	/* 标题简介 */
	.introduce-section{
		background: #fff;
		padding: 30upx;
		border-radius: 20upx;
		position: relative;
		z-index: 2;
		
		.title{
			font-size: 36upx;
			font-weight: 600;
			color: $font-color-dark;
			line-height: 1.4;
			margin-bottom: 15upx;
		}
		.price-box{
			display:flex;
			align-items:baseline;
			padding: 15upx 0;
			border-bottom: 1px solid #f5f5f5;
			margin-bottom: 15upx;
		}
		.price-tip{
			font-size: 28upx;
			color: $base-color;
			font-weight: 500;
		}
		.price{
			font-size: 48upx;
			font-weight: 700;
			color: $base-color;
			margin-right: 15upx;
		}
		.m-price{
			margin-right: 15upx;
			color: $font-color-light;
			text-decoration: line-through;
			font-size: 26upx;
		}
		.coupon-tip{
			align-items: center;
			padding: 6upx 12upx;
			background: linear-gradient(135deg, #ff6b6b, #ee5a24);
			font-size: $font-sm;
			color: #fff;
			border-radius: 20upx;
			line-height: 1;
			transform: translateY(-2upx);
			box-shadow: 0 4upx 10upx rgba(238, 90, 36, 0.3);
		}
		.bot-row{
			display:flex;
			align-items:center;
			padding-top: 15upx;
			font-size: $font-sm;
			color: $font-color-light;
			text{
				flex: 1;
				position: relative;
				padding-left: 24upx;
			}
			text:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 16upx;
				height: 16upx;
				background-color: #f0f0f0;
				border-radius: 50%;
			}
			text:nth-child(1):before {
				background-color: #4cd964;
			}
			text:nth-child(2):before {
				background-color: #f0ad4e;
			}
			text:nth-child(3):before {
				background-color: #5391f1;
			}
		}
	}
	
	.c-list{
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;
		border-radius: 20upx;
		overflow: hidden;
		.c-row{
			display:flex;
			align-items:center;
			padding: 30upx;
			position:relative;
			transition: background-color 0.3s ease;
			&:last-child {
				border-bottom: none;
			}
			&:active {
				background-color: #f9f9f9;
			}
		}
		.tit{
			width: 140upx;
			font-weight: 600;
			color: $font-color-dark;
		}
		.con{
			flex: 1;
			color: $font-color-dark;
			.selected-text{
				margin-right: 10upx;
				padding: 6upx 12upx;
				background-color: #f5f5f5;
				border-radius: 15upx;
				font-size: $font-sm;
			}
		}
		.bz-list{
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			text{
				display: inline-block;
				margin-right: 30upx;
				position: relative;
				padding-left: 24upx;
			}
			text:before {
				content: '✓';
				position: absolute;
				left: 0;
				color: #4cd964;
				font-weight: bold;
			}
		}
		.con-list{
			flex: 1;
			display:flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}
		.red{
			color: $uni-color-primary;
			font-weight: 500;
		}
	}
	
	.eva-box{
		display: flex;
		padding: 20upx 0;
		.portrait{
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			border: 2px solid #f0f0f0;
		}
		.right{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;
			.name {
				font-weight: 600;
				margin-bottom: 10upx;
			}
			.con{
				font-size: $font-base;
				color: $font-color-dark;
				padding: 15upx 0;
				line-height: 1.5;
			}
			.bot{
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color:$font-color-light;
				.attr {
					color: $font-color-base;
				}
			}
		}
	}
	/*  详情 */
	.detail-desc{
		background: #fff;
		border-radius: 20upx;
		overflow: hidden;
		.d-header{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100upx;
			font-size: $font-base + 4upx;
			font-weight: 600;
			color: $font-color-dark;
			position: relative;
			background: linear-gradient(to right, #f8f9fa, #fff, #f8f9fa);
				
			text{
				padding: 0 30upx;
				background: #fff;
				position: relative;
				z-index: 1;
				border-radius: 20upx;
				box-shadow: 0 4upx 15upx rgba(0, 0, 0, 0.05);
			}
			&:after{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 60%;
				height: 0;
				content: '';
				border-bottom: 1px solid #eee;
			}
		}
	}
	
	/* 规格选择弹窗 */
	.attr-content{
		padding: 30upx;
		.a-t{
			display: flex;
			align-items: center;
			padding-bottom: 30upx;
			border-bottom: 1px solid #f5f5f5;
			image{
				width: 180upx;
				height: 180upx;
				flex-shrink: 0;
				border-radius: 16upx;
				box-shadow: 0 8upx 20upx rgba(0, 0, 0, 0.1);
				cursor: pointer;
				transition: all 0.3s ease;
			}
			image:hover {
				transform: scale(1.05);
				box-shadow: 0 12upx 24upx rgba(0, 0, 0, 0.15);
			}
			image:active {
				transform: scale(0.98);
			}
			.right{
				display: flex;
				flex-direction: column;
				padding-left: 30upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 1.5;
				.price{
					font-size: 40upx;
					font-weight: 700;
					color: $base-color;
					margin-bottom: 15upx;
				}
				.stock {
					color: $font-color-light;
					margin-bottom: 10upx;
				}
				.selected {
					font-size: $font-sm;
					color: $font-color-base;
				}
				.selected-text{
					margin-right: 10upx;
					color: $font-color-dark;
					font-weight: 500;
				}
			}
		}
		.attr-list{
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
			> text:first-child {
				font-weight: 600;
				color: $font-color-dark;
				margin-bottom: 20upx;
			}
		}
		.item-list{
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;
			text{
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f5f5f5;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 30upx;
				min-width: 120upx;
				height: 70upx;
				padding: 0 25upx;
				font-size: $font-base;
				color: $font-color-dark;
				transition: all 0.3s ease;
				border: 2px solid transparent;
			}
			text:hover {
				background: #ebebeb;
			}
			.selected{
				background: linear-gradient(135deg, #ffebeb, #ffdede);
				color: $base-color;
				font-weight: 500;
				border-color: $base-color;
				transform: scale(1.05);
			}
		}
	}
	
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
			}
			.layer {
				animation: showLayer 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
			}
			.layer {
				animation: hideLayer 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.5);
			backdrop-filter: blur(5px);
		}
		.layer {
			position: fixed;
			z-index: 101;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 30upx 30upx 0 0;
			background-color: #fff;
			box-shadow: 0 -10upx 30upx rgba(0, 0, 0, 0.1);
			.buy-btn{
				height: 80upx;
				line-height: 80upx;
				border-radius: 40upx;
				background: linear-gradient(135deg, #ff6b6b, #ee5a24);
				font-size: $font-base + 4upx;
				font-weight: 600;
				color: #fff;
				margin: 30upx auto;
				width: 90%;
				box-shadow: 0 8upx 20upx rgba(238, 90, 36, 0.3);
				transition: all 0.3s ease;
			}
			.buy-btn:active {
				transform: scale(0.98);
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(100%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0%);
			}
			100% {
				transform: translateY(100%);
			}
		}
	}
	
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		left: 30upx;
		bottom:30upx;
		z-index: 95;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 94%;
		height: 110upx;
		background: rgba(255,255,255,.95);
		backdrop-filter: blur(10px);
		box-shadow: 0 10upx 40upx rgba(0,0,0,0.15);
		border-radius: 25upx;
		padding: 0 20upx;
		
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 90upx;
			height: 100%;
			transition: all 0.3s ease;
			position: relative;
			
			&:active {
				transform: scale(0.95);
			}
			
			.yticon{
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
				transition: all 0.3s ease;
			}
			&.active, &.active .yticon{
				color: $base-color;
			}
			.icon-fenxiang2{
				font-size: 42upx;
				transform: translateY(-2upx);
			}
			.icon-shoucang{
				font-size: 46upx;
			}
			
			&:hover .yticon {
				color: $base-color;
			}
		}
		.action-btn-group{
			display: flex;
			height: 80upx;
			border-radius: 40upx;
			overflow: hidden;
			margin-left: 20upx;
			box-shadow: 0 6upx 20upx rgba(233, 51, 35, 0.3);
			position:relative;
			
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base;
				font-weight: 600;
				padding: 0;
				border-radius: 40upx;
				background: linear-gradient(135deg, #ff6348, #e93323);
				color: #fff;
				transition: all 0.3s ease;
				
				&:active {
					opacity: 0.8;
				}
			}
		}
	}
	.icon-class {color: $icon-color}
	
	.buy-btn {
		width: 358px;
		height: 22px;
		border-radius: 11px;
		font-size: 11px;
		text-align: center;
		line-height: 22px;
		color: #fff;
		background: linear-gradient(135deg, #ff6b6b, #ee5a24);
		float: right;
		margin-right: 15px;
		margin-bottom: 10px;
		box-shadow: 0 4upx 15upx rgba(238, 90, 36, 0.3);
		transition: all 0.3s ease;
	}
	.buy-btn:active {
		transform: scale(0.95);
	}
	.gray {
		background: linear-gradient(135deg, #b2bec3, #95a5a6) !important;
		box-shadow: none !important;
	}
</style>
